<template>
	<view>
		<view class="feng_flow">
			<view class="flow_block">
				<view class="flow_item" v-for="(item, i1) in lists1" :key="i1">
					<image :src="item.coverImg" mode="widthFix" style="width: 100%;" @click="goToFaxian(item.id)"></image>
					<view class="content">
						<view class="article">{{ item.title }}</view>
						<view class="user">
							<view class="user-info">
								<view class="user-face">
									<image class="user-image" :src="item.headimgurl" mode="" />
								</view>
								<view class="user-name">{{ item.nick_name }}</view>
							</view>
							<view class="user-likes">
								<image src="https://img2.baidu.com/it/u=1830508128,2336481149&fm=26&fmt=auto"
									class="user-likes-icon" @click.stop="postLike()"/>
								{{ item.collection }}
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="flow_block">
				<view class="flow_item" v-for="(item2, i2) in lists2" :key="i2">
					<image :src="item2.coverImg" mode="widthFix" style="width: 100%;" @click="goToFaxian(item2.id)"></image>
					<view class="content">
						<view class="article">{{ item2.title }}</view>
						<view class="user">
							<view class="user-info">
								<view class="user-face">
									<image class="user-image" :src="item2.headimgurl" mode="" />
								</view>
								<view class="user-name">{{ item2.nick_name }}</view>
							</view>
							<view class="user-likes">
								<image src="https://img2.baidu.com/it/u=1830508128,2336481149&fm=26&fmt=auto"
									class="user-likes-icon" @click.stop="postLike()"/>
								{{ item2.collection }}
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="feng_flow" style="display: none;">
			<view class="flow_block">
				<view class="flow_item" v-for="(data,da_i) in dataLists" :key="da_i">
					<image v-if="data.coverImg" :src="data.coverImg" @error="imgError" @load="imgLoad" :id="da_i" mode="widthFix" style="width:100%;"></image>
				</view>
				
			</view>
			<view class="flow_block"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'fengFlow',
	props: {
		dataLists: {
			default: []
		}
	},
	data() {
		return {
			
			lists1: [],
			lists2: [],
			list1Height:0,
			list2Height:0,
			tmp_data:[],
			loaded:[], //图片加载成功数组
			loadErr:[], //图片加载失败数组
			showLoad:false
		};
	},
	methods: {
		//处理数据
		refresData(){
			
			console.log("loaded加载中。。")
			console.log(this.loaded.length);
			console.log("loadErr加载中。。")
			console.log(this.loadErr.length);
			console.log("tmp_data加载中。。")
			console.log(this.tmp_data.length);
			if(this.loaded.length + this.loadErr.length < this.tmp_data.length) return;
			const that = this
			this.tmp_data.map((da,di)=>{
				if(that.list1Height > that.list2Height){
					that.list2Height += da.img_height
					that.lists2.push(da)
				}else{
					that.list1Height += da.img_height
					that.lists1.push(da)
				}
			})

			console.log(this.lists1);
			this.hideLoadFlag()
		},
		//图片加载完成补齐数据
		imgLoad(e){
			console.log('imgLoad 事件')
			console.log(e)
			this.loaded.push(e.target.id)
			//存储数据
			this.tmp_data[e.target.id]['img_width'] = e.detail.width
			this.tmp_data[e.target.id]['img_height'] = e.detail.height
			
		},
		//图片未加载成功触发
		imgError(e){
			console.log(e)
			this.loadErr.push(e.target.id)
		},
		showLoadFlag(){
			if(!this.showLoad){
				this.showLoad = true
				uni.showLoading({
					title:'loading...',
					mask:'none'
				})
			}
		},
		hideLoadFlag(){
			if(this.showLoad) {
				uni.hideLoading();
				this.showLoad = false;
			}
		},
		goToFaxian(id){
			uni.navigateTo({
			    url:'/pages/faxian/detail?id='+id
		     })
		}
	},
	mounted() {
		const that = this
		that.tmp_data = that.dataLists
		that.showLoadFlag()
	},
	watch: {
		dataLists() {
			console.log('数据变了触发');
			this.loaded = []
			this.loadErr = []
			this.tmp_data = this.dataLists
			this.showLoadFlag()
		},
		loaded(){
			console.log('加载标记变化')
			//最后一个加载完成负责刷新数据
			this.refresData()
		},
		loadErr(){
			//最后一个加载完成负责刷新数据
			this.refresData()
		}
	}
};
</script>

<style>
.feng_flow {
	display: flex;
	padding:15upx;
}
.flow_block {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.flow_item {
	margin:15upx;
	/* border-radius: 20upx; */
	background:#f4f4f4;
	overflow: hidden;
}
.flow_item_con{padding:10upx 20upx 20upx;}
.flow_item_title{position: relative;font-size:32upx;font-weight: 700;margin-bottom:5upx;}
.flow_item_des{font-size:24upx;}

	.content {
		margin-top: 16rpx;
		margin-bottom: 20rpx;
		}
	.content .article {
		width: 300rpx;
		margin-top: 17rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		display: -webkit-box;
		/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-line-clamp: 2;
		/*用来限制在一个块元素显示的文本的行数。*/
		-webkit-box-orient: vertical;
		/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
	}

.user {
		height: 50rpx;
		margin-top: 21rpx;
		// line-height: 60rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		padding: 10px;
	}
		.user .user-info {
			display: flex;
			align-items: center;

			}
			.user .user-info .user-face {
				width: 48rpx;
				height: 48rpx;
					}
				.user .user-info .user-face  .user-image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

			.user .user-info .user-name {
				margin-left: 10rpx;
				width: 159rpx;
				overflow: hidden;
				white-space: nowrap;
			}

		.user .user-likes {
			display: flex;
			align-items: center;
			font-family: SFUIDisplay;
			font-size: 22rpx;

		}
			.user .user-likes .user-likes-icon {
				height: 28rpx;
				width: 25rpx;
				margin-right: 11rpx;
			}

		.user .user-del {
			height: 38rpx;
			width: 38rpx;

	}
		.user .user-del .user-del-icon {
			height: 38rpx;
			width: 38rpx;
		}
</style>
